<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>FisheyeList Widget Demo</title>

<script type="text/javascript">
	var djConfig = {
			isDebug: true,
			baseScriptUri: "../../",
			forceXDomain: true,
			xdWaitSeconds: 10
	};

</script>
<script type="text/javascript" src="http://tagneto.org/dojo/xd/dojo.js"></script>
<script language="JavaScript" type="text/javascript">
	dojo.registerModulePath("dojo", "http://tagneto.org/dojo/xd/src");
	dojo.registerModulePath("dojo.widget", "src/widget");

	dojo.require("dojo.widget.FisheyeList");
</script>
</head>
<body style="padding-left: 150px;">

<h1>Mixed XDomain and Local XHR Test Page</h1>
<p>
This test should succeed. It tests loading via xdomain,
but dojo.widget.* should be loaded locally. The fisheye widget should load successfully.
</p>
<p><b>IMPORTANT:</b> Change the domain name in the source of this file
to be the domain name that you want to test. You can change the paths too.
In this file /dojo/xd refers to a dojo installation that has run the xdgen
build command to build cross-domain compatible packages.

<p>HTML before</p>
<p>HTML before</p>
<p>HTML before</p>
<p>Liberal trigger: move the mouse anywhere near the menu and it will start to expand:</p>
<div dojoType="FisheyeList"
	itemWidth="40" itemHeight="40"
	itemMaxWidth="150" itemMaxHeight="150"
	orientation="horizontal"
	effectUnits="2"
	itemPadding="10"
	attachEdge="center"
	labelEdge="bottom"
>

	<div dojoType="FisheyeListItem"
		id="item1"
		onclick="alert('click on' + this.caption + '(from widget id ' + this.widgetId + ')!');"
		caption="Item 1"
		iconsrc="images/fisheye_1.png">
	</div>

	<div dojoType="FisheyeListItem"
		caption="Item 2"
		iconsrc="images/fisheye_2.png">
	</div>

	<div dojoType="FisheyeListItem"
		caption="Item 3"
		iconsrc="images/fisheye_3.png">
	</div>

	<div dojoType="FisheyeListItem"
		iconsrc="images/fisheye_4.png">
	</div>

	<div dojoType="FisheyeListItem"
		caption="Really Long Item Label"
		iconsrc="images/fisheye_3.png">
	</div>

	<div dojoType="FisheyeListItem"
		iconsrc="images/fisheye_2.png">
	</div>

	<div dojoType="FisheyeListItem"
		iconsrc="images/fisheye_1.png">
	</div>
</div>

<p>HTML after</p>
<p>HTML after</p>
<p>HTML after</p>
<p>This was has strict triggering, so you actually have to mouse over the menu to make it start moving:</p>
<div dojoType="FisheyeList"
	itemWidth="40" itemHeight="40"
	itemMaxWidth="150" itemMaxHeight="150"
	orientation="horizontal"
	effectUnits="2"
	itemPadding="10"
	attachEdge="center"
	labelEdge="bottom"
	conservativeTrigger="true"
>

	<div dojoType="FisheyeListItem"
		id="item1b"
		onclick="alert('click on' + this.caption + '(from widget id ' + this.widgetId + ')!');"
		caption="Item 1"
		iconsrc="images/fisheye_1.png">
	</div>

	<div dojoType="FisheyeListItem"
		caption="Item 2"
		iconsrc="images/fisheye_2.png">
	</div>

	<div dojoType="FisheyeListItem"
		caption="Item 3"
		iconsrc="images/fisheye_3.png">
	</div>

	<div dojoType="FisheyeListItem"
		iconsrc="images/fisheye_4.png">
	</div>

	<div dojoType="FisheyeListItem"
		caption="Really Long Item Label"
		iconsrc="images/fisheye_3.png">
	</div>

	<div dojoType="FisheyeListItem"
		iconsrc="images/fisheye_2.png">
	</div>

	<div dojoType="FisheyeListItem"
		iconsrc="images/fisheye_1.png">
	</div>
</div>
</body>
</html>
